<template>
  <!-- 主变负载右下角-tap切换表格 -->
  <div class="right-table mediumtablestyle">
    <el-table
      v-show="dataIndex===0"
      :data="newList"
      :row-class-name="tableRowClassName"
      style="width: 100%"
      border
      height="100%"
    >
      <!-- <el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"></el-table-column> -->
      <el-table-column prop="jcmc" :show-overflow-tooltip="true" label="测点名称"></el-table-column>
      <el-table-column prop="jcxz" :show-overflow-tooltip="true" label="监测类型"></el-table-column>
      <el-table-column prop="jl" :show-overflow-tooltip="true" label="监测结论"></el-table-column>
      <el-table-column prop="jcrq" :show-overflow-tooltip="true" width="120" label="监测时间"></el-table-column>
    </el-table>
    <el-table
      v-show="dataIndex===1"
      :data="newList"
      :row-class-name="tableRowClassName"
      style="width: 100%"
      border
      height="100%"
    >
      <!-- <el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"></el-table-column> -->
      <el-table-column prop="qxzsbmc" :show-overflow-tooltip="true" label="测点名称"></el-table-column>
      <el-table-column prop="qxmsmc" :show-overflow-tooltip="true" label="缺陷描述"></el-table-column>
      <el-table-column prop="fxrq" :show-overflow-tooltip="true" label="发现时间"></el-table-column>
      <el-table-column prop="qxxz" :show-overflow-tooltip="true" width="120" label="缺陷类型"></el-table-column>
      <el-table-column prop="sfxq" :show-overflow-tooltip="true" width="120" label="缺陷状态"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import lodash from "lodash";
@Component
export default class rightTable extends Vue {
  @Prop({ default: () => [] })
  ChargedList: any;
  @Prop({ default: () => [] })
  DefectsDataList: any;
  @Prop()
  listIndex: any;
  private dataIndex: number = 0;
  //表格数据
  public tableData: Array<any> = [
    {
      jcmc: "10kV分段隔离开关柜",
      jcxz: "红外测温检测",
      jl: "正常",
      jcrq: "2019-04-03 19:05:19",
      path:
        "http://10.141.17.15:19099/itxsb2/runmode0/0322/disp/CLTYWJ/3553951c-61dd-4706-b8ce-c1ae61c727c2_disp.jpg",
    },
    {
      jcmc: "10kV分段隔离开关柜",
      jcxz: "红外测温检测",
      jl: "正常",
      jcrq: "2019-04-03 19:05:19",
      path:
        "http://10.141.17.15:19099/itxsb2/runmode0/0322/disp/CLTYWJ/16bcc581-b143-49eb-b86a-140c228a78a3_disp.jpg",
    },
    {
      jcmc: "10kV分段隔离开关柜",
      jcxz: "红外测温检测",
      jl: "正常",
      jcrq: "2019-02-13 09:17:40",
      path:
        "http://10.141.17.15:19099/itxsb2/runmode0/0322/disp/CLTYWJ/57c22c90-fb0d-440b-acfd-dcb8b8d20234_disp.jpg",
    },
    {
      jcmc: "10kV分段隔离开关柜",
      jcxz: "红外测温检测",
      jl: "正常",
      jcrq: "2019-02-13 09:17:40",
      path:
        "http://10.141.17.15:19099/itxsb2/runmode0/0322/disp/CLTYWJ/aa3d5936-3b96-462a-94c1-7c99831691e5_disp.jpg",
    },
    {
      jcmc: "10kV分段隔离开关柜",
      jcxz: "红外测温检测",
      jl: "正常",
      jcrq: "2018-12-10 17:10:47",
      path:
        "http://10.141.17.15:19099/itxsb2/runmode0/0322/disp/CLTYWJ/e6d71460-e699-4140-9067-7d7388050f22_disp.jpg",
    },
    {
      jcmc: "10kV分段隔离开关柜",
      jcxz: "红外测温检测",
      jl: "正常",
      jcrq: "2018-12-10 17:10:47",
      path:
        "http://10.141.17.15:19099/itxsb2/runmode0/0322/disp/CLTYWJ/6c914042-616c-4796-8b4c-54f0c18a6f32_disp.jpg",
    },
    {
      jcmc: "10kV分段隔离开关柜",
      jcxz: "红外测温检测",
      jl: "正常",
      jcrq: "2018-09-01",
      path:
        "http://10.141.17.15:19099/itxsb2/runmode0/0322/disp/CLTYWJ/c4d064e9-e815-4a17-9cfb-9131d4bf6264_disp.jpg",
    },
    {
      jcmc: "10kV分段隔离开关柜",
      jcxz: "红外测温检测",
      jl: "正常",
      jcrq: "2018-09-01",
      path:
        "http://10.141.17.15:19099/itxsb2/runmode0/0322/disp/CLTYWJ/d74d8ae2-49ee-491a-bc7c-490cd04ce245_disp.jpg",
    },
    {
      jcmc: "10kV分段隔离开关柜",
      jcxz: "红外测温检测",
      jl: "正常",
      jcrq: "01/09/2017",
      path:
        "http://10.141.17.15:19099/itxsb2/13116200176360_0322_20170901_48_K.jpg",
    },
  ];
  // 带点检测数据
  get newList() {
    this.dataIndex = this.listIndex;
    this.tableData = this.dataIndex === 0 ? this.ChargedList : this.DefectsDataList;
    return this.tableData;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
}
</script>

<style lang="scss" scoped>
.right-table {
  width: 100%;
  height: 100%;
  padding: 0 0.2rem 0.2rem;
  .normal {
    color: rgba(3, 204, 150, 1);
  }
  .abnormal {
    color: rgba(246, 91, 55, 1);
  }
}
</style>
<style lang="scss">
//弹窗
.right-table {
  .el-dialog {
    width: 11rem !important;
    height: 6.32rem;
  }
  .el-dialog__body {
    height: calc(100% - 44px);
  }
}
</style>
